var urls = {
    currentUser: '/front/user/current',
    updateUserInfo: '/front/user/_update'
};

window.layModules = {};

function AddressSelector(selector) {
    this.selector = selector;
    this.init();
}

AddressSelector.prototype = {
    init: function () {
        this.loadAddressData();
        this.initListener();
    },
    loadAddressData: function () {
        if (window.cities) {
            this.cities = window.cities;
            this.selector.province.append('<option value="">请选择</option>');
            for (var province in this.cities) {
                this.selector.province.append('<option>' + province + '</option>');
            }
            layModules.form.render();
        } else {
            alert('无法获取地区信息');
        }
    },
    initListener: function () {
        var _this = this;
        this.selector.province.change(function () {
            var p = $(this).val();
            _this.selector.city.empty();
            _this.selector.district.empty();
            _this.province = p;
            _this.loadCity(p);
        });
        this.selector.city.change(function () {
            var city = $(this).val();
            var province = _this.province;
            var dists = _this.cities[province][city];
            _this.selector.district.empty().append('<option value="">请选择</option>');
            for (var i in dists) {
                var dist = dists[i];
                _this.selector.district.append('<option>' + dist + '</option>');
            }
        });
    },
    loadCity: function (p) {
        var cities = this.cities[p];
        this.selector.city.empty().append('<option value="">请选择</option>');
        for (var city in cities) {
            this.selector.city.append('<option>' + city + '</option>')
        }
    }
};


function UserInfoForm() {
    this.init();
}

UserInfoForm.prototype = {
    init: function () {
        this.findView();
        this.initComponent();
    },
    findView: function () {
        this.form = $('#form-user-info');
        var doms = {};
        doms.name = $('#input-name');
        doms.email = $('#input-email');
        doms.mobileNumber = $('#input-mobile-number');
        doms.phoneNumber = $('#input-phone-number');
        doms.genderMale = $('#radio-gender-male');
        doms.genderFemale = $('#radio-gender-female');
        doms.genderUnknown = $('#radio-gender-unknown');
        doms.genderRadios = $('.radio-gender');
        doms.address = $('#input-address');
        doms.province = $('#selector-province');
        doms.city = $('#selector-city');
        doms.district = $('#selector-district');
        doms.industry = $('#selector-industry');
        this.doms = doms;
    },
    initComponent: function () {
        var _this = this;
        this.form.on('submit', function (e) {
            e.preventDefault();
            _this.updateUserInfo();
            return false;
        });
    },
    loadData: function (cb) {
        var _this = this;
        if (window.ssoValues && window.ssoValues.user) {
            _this.renderData(window.ssoValues.user);
            return cb ? cb() : null;
        } else {
            if (!window.ssoValues) {
                window.ssoValues = {};
            }
            $.get(urls.currentUser, function (res) {
                if (res.code === 0) {
                    window.ssoValues.user = res.data;
                    _this.renderData(window.ssoValues.user);
                } else {
                    layModules.layer.msg(res.msg);
                }
                return cb ? cb() : null;
            }, 'json');
        }
    },
    renderData: function (user) {
        var _this = this;
        var doms = this.doms;
        doms.name.val(user.name);
        doms.email.val(user.email);
        doms.mobileNumber.val(user.mobileNumber);
        doms.phoneNumber.val(user.phoneNumber);
        doms.address.val(user.address);
        this.select(doms.industry, user.industry);
        this.select(doms.province, user.province);
        doms.province.change();
        _this.select(doms.city, user.city);
        doms.city.change();
        _this.select(doms.district, user.district);
        doms.genderRadios.removeAttr('checked');
        var checkedGenderRadio = null;
        switch (user.gender) {
            case 0:
                checkedGenderRadio = doms.genderUnknown;
                break;
            case 1:
                checkedGenderRadio = doms.genderMale;
                break;
            case 2:
                checkedGenderRadio = doms.genderFemale;
                break;
            default:
                console.error('Unknown gender ', user.gender);
        }
        if (checkedGenderRadio) {
            checkedGenderRadio.prop('checked', 'checked');
        }
        layModules.form.render();
    },
    select: function (dom, text) {
        dom.find('option').removeAttr('selected').each(function (k, v) {
            if (v.innerHTML === text) {
                $(v).attr('selected', 'selected');
            }
        });
    },
    updateUserInfo: function () {
        var fd = new FormData(this.form[0]);
        var postData = {
            name: fd.get('name'),
            email: fd.get('email'),
            mobileNumber: fd.get('mobileNumber'),
            phoneNumber: fd.get('phoneNumber'),
            gender: fd.get('gender'),
            province: fd.get('province'),
            city: fd.get('city'),
            district: fd.get('district'),
            address: fd.get('address'),
            industry: fd.get('industry')
        };
        var loadingIndex = layModules.layer.load(1);
        $.ajax({
            url: urls.updateUserInfo,
            method: 'POST',
            data: postData,
            success: function (res) {
                if (res.code === 0) {
                    layModules.layer.msg('保存成功');
                } else {
                    layModules.layer.msg(res.msg);
                }
            },
            complete: function () {
                layModules.layer.close(loadingIndex);
            }
        });
    }
};

$(function () {
    var addressSelector = null;

    function onLoad() {
        var provinceSelector = $('#selector-province');
        var citySelector = $('#selector-city');
        var districtSelector = $('#selector-district');

        addressSelector = new AddressSelector({
            province: provinceSelector,
            city: citySelector,
            district: districtSelector
        });

        var form = new UserInfoForm();
        form.loadData(function () {

        });
    }

    layui.use(['form', 'layer'], function () {
        layModules.form = layui.form;
        layModules.layer = layui.layer;
        onLoad();
    });
});